<template>
	<view class="content">
		<scroll-view scroll-y="true" >
			<radio-group name="reason" @change="radioChange">
				<view class="row detail">
					<view class="col-24 de_title">
						平台相关
					</view>
					<view class="col-24">
						<view class="row de_list" v-for="(item,index) in list.listPlatform" :key="index">
							<view class="col-20">
								{{item}}
							</view>
							<view class="col-4 t_right">
								<radio :value="'1-' + index" :checked="index == 0 ? true : false"/>
							</view>
						</view>
					</view>
				</view>
				<view class="row detail">
					<view class="col-24 de_title">
						司机相关
					</view>
					<view class="col-24">
						<view class="row de_list" v-for="(item,index) in list.listDriver" :key="index">
							<view class="col-20">
								{{item}}
							</view>
							<view class="col-4 t_right">
								<radio :value="'2-' + index" />
							</view>
						</view>
					</view>
				</view>
				<view class="row detail">
					<view class="col-24 de_title">
						自己原因
					</view>
					<view class="col-24">
						<view class="row de_list" v-for="(item,index) in list.listUser" :key="index">
							<view class="col-20">
								{{item}}
							</view>
							<view class="col-4 t_right">
								<radio :value="'3-' + index" />
							</view>
						</view>
					</view>
				</view>
			</radio-group>
		</scroll-view>
		<button type="primary" @click="sure()">确认提交</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				obj: {
					orderId: 0, //订单ID ,
					userCancelMsg:'' , // 用户取消订单原因 ,
					userCancelPayFrom: 1, //司机取消违约金支付终端：1微信小程序、2APP ,
					userCancelPayType: 2, //用户取消违约金支付渠道：1支付宝、2微信 ,
				},
				list: {
					listDriver: [],
					listPlatform: [],
					listUser: []
				}
			}
		},
		onLoad(option) {
			this.obj.orderId = option.orderId;
			this.load();
		},
		methods: {
			async load(){
				let res = await this.$api.request(this.$api.order.getReason);
				if(res){
					this.list = res;
				}
			},
			async sure(){
				if(this.obj.userCancelMsg == ''){
					this.obj.userCancelMsg = this.list.listPlatform[0];
				}
				let res = await this.$api.request(this.$api.order.cancelSub,this.obj);
				this.$public.showToast('取消成功');
				setTimeout(()=>{
					uni.navigateBack({
						delta:2
					})
				},800)
			},
			radioChange({detail}){
				let vaAr = detail.value.split('-');
				switch(vaAr[0]){
					case '1':
						this.obj.userCancelMsg = this.list.listPlatform[vaAr[1]];
						return
					case '2':
						this.obj.userCancelMsg = this.list.listDriver[vaAr[1]];
						return
					default:
						this.obj.userCancelMsg = this.list.listUser[vaAr[1]];
						return
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.content{
		padding: 20rpx 0;
	}
	
	scroll-view{
		height: 88vh;
	}
	
	.detail{
		background-color: #FFFFFF;
		margin-bottom: 25rpx;
		.de_title{
			width: 92%;
			padding: 0 4%;
			font-size: 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			font-weight: bold;
			color: #333333;
			border-bottom: 1rpx solid #ededed;
		}
		.de_list{
			width: 92%;
			padding: 0 4%;
			height: 85rpx;
			line-height: 85rpx;
			color: #333333;
			font-size: 28rpx;
		}
	}

	button{
		width: 92%;
		height: 96rpx;
		line-height: 96rpx;
		margin-top: calc((15vh - 140rpx) / 2);
		border-radius: 48rpx;
		background-color: #6CBF30;
		font-size: 32rpx;
	}
</style>
